<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户名称" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入用户" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="queryParams.email" placeholder="请输入用户邮箱" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input v-model="queryParams.phonenumber" placeholder="请输入用户手机号码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
          @click="handleUpdate">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
          @click="handleDelete">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="usersList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="用户Id" align="center" prop="userId" />
      <el-table-column label="用户名称" align="center" prop="userName" />
      <el-table-column label="用户类型" align="center" prop="userType" />
      <el-table-column label="邮箱" align="center" prop="email" />
      <el-table-column label="手机号码" align="center" prop="phonenumber" />
      <el-table-column label="性别" align="center" prop="sex" />
      <el-table-column label="头像" align="center" prop="avatar">
        <template #default="scope">
          <el-image :src="scope.row.avatar" class="avatar">
          </el-image>
        </template>

      </el-table-column>
      <el-table-column label="密码" align="center" prop="password" />
      <el-table-column label="状态" align="center" prop="status" />
      <el-table-column label="是否删除" align="center" prop="delFlag" />
      <el-table-column label="最后登录IP" align="center" prop="loginIp" />
      <el-table-column label="最后登录时间 " align="center" prop="loginDate" width="180">

      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

     <!-- <el-pagination v-show="total.value > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.value.pageSize"
      @pagination="getList" /> -->
      <el-pagination :total="total" :page-size="queryParams.pageSize" v-model:current-page="queryParams.pageNum"  @current-change="getList" />

    <!-- 添加或修改用户管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form v-model="form" label-width="80px">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="用户头像" prop="avatar">
          <image-uploader  @get-image="getImageObj"></image-uploader>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入用户备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { listUsers, getUsers, delUsers, addUsers, updateUsers } from "@/api/music/music.ts";
import { ref, getCurrentInstance, computed, onBeforeMount, onMounted, toRefs, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { UToast } from 'undraw-ui'
import imageUploader  from "@/components/music-content/imageUploader.vue"

const ruleFormRef = ref('')



const getImageObj = (imageObj)=>{
 form.value.imageAvatar=imageObj

}

// 遮罩层
const loading = ref(false)
// 选中数组
const ids = ref([])
// 非单个禁用
var single = ref(true)
// 非多个禁用
var multiple = ref(true)
// 显示搜索条件
var showSearch = true
// 总条数
const total = ref(0)
// 用户管理表格数据
const usersList = ref([])
// 弹出层标题
const title = ref("")
// 是否显示弹出层
const open = ref(false)
// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  userName: null,
  userType: null,
  email: null,
  phonenumber: null,
  sex: null,
  avatar: null,
  password: null,
  status: null,
  delFlag: null,
  loginIp: null,
  loginDate: null,
  
})
// 表单参数
const form = ref({
  userId: '',
  userName: '',
  userType: '',
  email: '',
  phonenumber: '',
  sex: '',
  avatar: '',
  password: '',
  status: '',
  delFlag: '',
  loginIp: '',
  loginDate: '',
  createBy: '',
  createTime: '',
  updateBy: '',
  updateTime: '',
  remark: '',
  imageAvatar: ''
})
// 表单校验
const rules = ref({
})

/** 查询用户管理列表 */
const getList = async () => {
  const response = await listUsers(queryParams.value)
  usersList.value = response.rows;
  total.value = response.total;

}



// 取消按钮
const cancel = () => {
  open.value = false;
  reset();
}
// 表单重置
const reset = () => {
  form.value = {

  };

}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
}

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.userId)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}
/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  open.value = true;
  title.value = "添加用户管理";
}
/** 修改按钮操作 */
const handleUpdate = async (row) => {
  form.value = {}
  const userId = row.userId || ids.value
  const response = await getUsers(userId)
  form.value = response.data;
  console.log(form.value)
  open.value = true;
  title.value = "修改用户管理";

}
/** 提交按钮 */
const submitForm = () => {
  if (form.value.userId != null) {
    updateUsers(form.value).then(response => {
      UToast({ message: '修改成功!', type: 'success' })
      open.value = false;
      getList();
    });
  } else {
    addUsers(form.value).then(response => {
      UToast({ message: '新增成功!', type: 'success' })
      open.value = false;
      getList();
    });
  }
}


/** 删除按钮操作 */
const handleDelete = (row) => {
  const userIds = row.userId || ids.value;
  ElMessageBox.confirm(
    '是否确认删除用户id为"' + userIds + '"的数据项？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delUsers(userIds).then(response => {
        UToast({ message: '删除成功!', type: 'success' })
        getList()
      })


    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
/** 导出按钮操作 */
const handleExport = () => {
  // this.download('system/users/export', {
  //   ...this.queryParams
  // }, `users_${new Date().getTime()}.xlsx`)
}
onMounted(() => {
  getList()
}
)

</script>
<style scoped lang="scss">
.avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
}
</style>